<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Slide Verify</view>
			<view class="tui-page__desc">滑动验证码，可设置基本样式，可重置验证。</view>
		</view>
		<view class="tui-title" style="padding-top: 0;">默认</view>
		<view class="tui-verify-box">
			<tui-slide-verify @success="success"></tui-slide-verify>
		</view>

		<view class="tui-title">设置宽度、高度</view>
		<view class="tui-verify-box">
			<tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" @success="success"></tui-slide-verify>
		</view>

		<view class="tui-title">设置颜色,字体大小等</view>
		<view class="tui-verify-box">
			<tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" color="#44cf85" backgroundColor="#e8f6e8"
			 arrowColor="#44cf85" borderColor="#e8f6e8" @success="success"></tui-slide-verify>
		</view>
		<view class="tui-verify-box">
			<tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" color="#faa851" backgroundColor="#fef5eb"
			 activeBgColor="#ff7900" arrowColor="#faa851" borderColor="#fef5eb" activeBorderColor="#ff7900" checkColor="#ff7900"
			 :size="32" @success="success"></tui-slide-verify>
		</view>
		<view class="tui-title">验证通过后重置验证</view>
		<view class="tui-verify-box">
			<view class="tui-verify-box">
				<tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" color="#44cf85" backgroundColor="#e8f6e8"
				 arrowColor="#44cf85" borderColor="#e8f6e8" :resetSlide="reset" @success="success"></tui-slide-verify>
			</view>
		</view>
		<view class="tui-btn-box">
			<tui-button width="320rpx" height="80rpx" type="green" bold @click="resetSlide">重置验证</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slideBarWidth: 300,
				slideBlockWidth: 40,
				reset: 0
			};
		},
		onLoad() {
			setTimeout(() => {
				this.init()
			}, 50)
		},
		methods: {
			init() {
				let sys = uni.getSystemInfoSync()
				this.slideBarWidth = sys.windowWidth - uni.upx2px(60)
				this.slideBlockWidth = uni.upx2px(90)
			},
			resetSlide() {
				this.reset++;
				this.tui.toast("重置成功！")
			},
			success() {
				this.tui.toast("验证通过！")
			}
		}
	};
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.tui-btn-box {
		width: 100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.tui-verify-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
</style>
